<template>
  <div>
    <el-tree
      :data='categories'
      :props='defaultProps'
      node-key='catId'
      ref="categoryTree"
    ></el-tree>
  </div>
</template>
<script>
export default {
  data () {
    return {
      // 与tree双向绑定的数据
      categories: [],
      expandedKey: [],
      // tree的一些配置属性,详见elementUI官方文档
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },

  // 提示消息,内容与配置项目通过形参输入
  methods: {
    // 从数据库获取全部分类数据
    getMenus () {
      this.$http({
        url: this.$http.adornUrl('/product/category/list/tree'),
        method: 'get'
      }).then(({data}) => {
        this.categories = data.categories
      })
    }
  },

  // 生命周期-创建时
  created () {
    // 创建时获取全部数据
    this.getMenus()
  }
}
</script>
